import { Component } from "react";
import { observer } from 'mobx-react';
import { history } from 'umi';
import styles from './game.less';
import { Tabs } from 'antd';
import Footer from "../components/footer";
import Header from "../components/header";
import { gameStore } from "@/stores/gameStore";
import GameModel from "@/models/game";

@observer
export default class game extends Component {
  componentDidMount() {
    gameStore.listGame();

  }
  render() {

    let listNews: Array<GameModel> = gameStore.gameList;
    let gameArr1 = [];
    let gameArr2 = [];
    let gameArr3 = [];
    let gameArr4 = [];

    for (let i = 0; i < listNews?.length; i++) {
      gameArr1.push(
        <div className={styles.dispaly_container}>
          <div className={styles.dispaly_time}>比赛简介：{listNews[i].content}</div>
          <div className={styles.news_devider}></div>
        </div> as never
      ),
        gameArr2.push(
          <div className={styles.dispaly_container}>
            <div className={styles.dispaly_time}>{listNews[i].gameRule}</div>
            {/* <div className={styles.display_name}>{listNews[i].gameSite}</div> */}
            <div className={styles.news_devider}></div>
          </div> as never
        ),
        gameArr3.push(
          <div className={styles.dispaly_container}>
            <div className={styles.dispaly_time}>{listNews[i].gameSite}</div>
            {/* <div className={styles.display_name}>{listNews[i].gameRule}</div> */}
            <div className={styles.news_devider}></div>
          </div> as never
        ),
        gameArr4.push(
          <div className={styles.dispaly_container}>
            <div className={styles.dispaly_time}>{listNews[i].gameObject}</div>
            {/* <div className={styles.display_name}>{listNews[i].gameRule}</div> */}
            <div className={styles.news_devider}></div>
          </div> as never
        )


    }

    const { TabPane } = Tabs;
    return (
      <div>
        <Header />
        {/* 参赛须知 */}
        <div className={styles.content_box}>
          <div className={styles.midile_intro}>
            <div className={styles.game_intro}>大赛简介</div>
            <div className={styles.midile_content}>
              {gameArr1}
            </div>
            <div className={styles.middle_required}>比赛要求
              <div>
              </div>
            </div>
            <div className={styles.middile_card_box}>
              <div className={styles.middle_card_container} onClick={() => { }}>
                比赛规则
                <div>
                  {gameArr2}
                </div>
              </div>
              <div className={styles.middle_card_container}>
                比赛地点
                {gameArr3}
              </div>
              <div className={styles.middle_card_container}>
                比赛对象
                {gameArr4}
              </div>
              <div className={styles.middle_card_container} onClick={() => { history.push('/signUp') }}>
                立即报名
              </div>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    )
  }
}